<template>
  <div class="order" style="width: 85%;">
    <el-form :model="formData" ref="form" label-width="80px">
      <el-form-item label="">
        订单号
        <el-input v-model="formData.transactionId" style="width: 250px;"></el-input>
        <!--        商品名称-->
        <!--        <el-input v-model="formData.item" style="width: 250px;"></el-input>-->
        手机号码
        <el-input v-model="formData.tel" style="width: 250px;"></el-input>
        买家昵称
        <el-input v-model="formData.customerNickname" style="width: 250px;"></el-input>
        收货人
        <el-input v-model="formData.name" style="width: 250px;"></el-input>
      </el-form-item>
      <el-form-item label="">
        店铺名称
        <el-select v-model="formData.sid">
          <el-option label="所有店铺" value="" style="width: 300px;"></el-option>
          <el-option v-for="item in shops" :key="item.id" :label="item.name" :value="item.id" style="width: 300px;"></el-option>
        </el-select>
        <!--        配送员-->
        <!--        <el-input v-model="formData.cname" style="width: 250px;"></el-input>-->
        订单类型
        <el-select v-model="formData.orderType">
          <el-option label="全部类型" value="" style="width: 300px;"></el-option>
          <el-option label="外卖订单" value="外卖订单" style="width: 300px;"></el-option>
          <el-option label="到店自取" value="到店自取" style="width: 300px;"></el-option>
        </el-select>
<!--      </el-form-item>-->
<!--      <el-form-item label="">-->
        创建时间
        <el-select v-model="formData.ztime" placeholder="全部" style="width: 200px;margin-right: 20px">
          <el-option label="全部" value=""></el-option>
          <el-option label="近三个月" value="1"></el-option>
          <el-option label="今年内" value="2"></el-option>
          <el-option label="2022年" value="3"></el-option>
          <el-option label="2021年" value="4"></el-option>
          <el-option label="2020年" value="5"></el-option>
          <el-option label="2020年以前" value="6"></el-option>
        </el-select>
        订单状态
        <el-select v-model="formData.status">
          <el-option label="全部" value="" style="width: 300px;"></el-option>
          <el-option label="交易成功" value="1" style="width: 300px;"></el-option>
          <el-option label="正在交易" value="0" style="width: 300px;"></el-option>
          <!--          <el-option label="手动下架" value="2" style="width: 300px;"></el-option>-->
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="resetForm">重置</el-button>
        <el-button type="primary" @click="findPage">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData"  style="width: 100%" align="center">
      <el-table-column prop="product" label="商品" width="300px">
        <template slot-scope="scope">
          <div style="display: flex">
            <div style="margin-right: 20px;margin-top: 10px; ">
              <img
                  :src="scope.row.goods[0].gimage"
                  width="50px">
            </div>
            <div>
              <div @click="good(scope.row)" style="color: #007bff;cursor: pointer;">{{ scope.row.goods[0].gname }}</div>
              <div style="font-size: 12px">订单号:{{ scope.row.transactionId }}</div>
              <div style="font-size: 12px">规格:{{ scope.row.goods[0].picked }}</div>
              <div style="font-size: 12px">创建时间:{{ scope.row.creationTime }}</div>
              <div style="font-size: 12px">店铺:{{ scope.row.shopname }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="customerNickname" label="买家">
      </el-table-column>
      <el-table-column prop="receiver" label="收货人">
        <template slot-scope="scope">
          <div>{{ scope.row.name }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="deliverer" label="配送员">
        <template slot-scope="scope">
          <div>张三</div>
          <div>+86 15536793765</div>
        </template>
      </el-table-column>
      <el-table-column prop="payment" label="应付款">
        <template slot-scope="scope">
          <div>¥{{ scope.row.price }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="afterSales" label="售后">
        <template slot-scope="scope">
          <div>{{ scope.row.afterSales }}</div>
        </template>
      </el-table-column>
      <el-table-column label="交易状态">
        <template slot-scope="scope">
          <div>{{stepStatus(scope.row.orderStatus)}}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="xq(scope.row)">订单详情</el-button>
          <br>
          <el-button type="text">订单跟踪</el-button>
          <br>
          <el-button type="text" @click="dispatchtracking(scope.row)">调度跟踪</el-button>
<!--          <br>-->
<!--          <el-button type="text">评价详情</el-button>-->
          <!--          <el-button type="text" v-if="scope.row.promotion === '免配送费订单'">免配送费订单</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[4, 8, 16, 32]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 商店信息
      shops: [],
      // 分页
      current: 1,
      pageSize: 4,
      total: 0,
      // 模糊查
      formData: {},
      // 订单信息
      tableData: [],

    }
  },
  methods: {
    dispatchtracking(){
      this.$router.push("/dispatchtracking")
    },
    // 交易状态
    stepStatus(a) {
      const s = ["顾客下单", "顾客付款", "商家接单", "顾客取货", "评价"];
      if (a!= 5) {
        return s[a];
      } else {
        return "订单已完成";
      }
    },
    // 详情
    good(row){
      localStorage.setItem("goodid", row.goods[0].gid)
      this.$router.push('/goodxq')
    },
    // 重置
    resetForm(){
      this.formData = {}
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.findPage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val;
      this.findPage();
    },
    xq(row) {
      localStorage.setItem('order', JSON.stringify(row))
      this.$router.push('/orderxq')
    },
    findPage() {
      this.axios.post(`http://localhost:8000/xm-trade/order/findPage?current=${this.current}&pageSize=${this.pageSize}`, this.formData).then(res => {
        if (res.data.code == 200) {
          this.tableData=res.data.data.records
          this.total=res.data.data.total
        } else {
          this.$message({
            message: '查询失败',
            type: 'error'
          })
        }
      })
    },
    findshop() {
      this.axios.get(`http://localhost:8000/xm-trade/order/findshop`).then(res => {
        if (res.data!=null) {
          this.shops = res.data
        } else {
          this.$message({
            message: '查询失败',
            type: 'error'
          })
        }
      })
    },
  },
  created() {
    this.findPage();
    this.findshop();
  }
}
</script>
